<template>
  <div class="wrap eiltewrap">
    <!-- 左侧 -->
    <div class="leftbox">
      <!-- <img src="../assets/img/jingpin.png" alt="" />
      <h1>积分攻略</h1> -->
    </div>
    <ul class="box">
      <li>
        <img src="../assets/img/integral-01.9386d4bf.png" alt="" />
        <div class="top">签到的积分</div>
        <div class="bottom">去签到</div>
      </li>
      <li>
        <img src="../assets/img/integral-02.150d92a1.png" alt="" />
        <div class="top">购课得积分</div>
        <div class="bottom">去购课</div>
      </li>
      <li>
        <img src="../assets/img/integral-03.9870f3f1.png" alt="" />
        <div class="top">推荐的积分</div>
        <div class="bottom">去推荐</div>
      </li>
      <li>
        <img src="../assets/img/integral-04.afadcbdf.png" alt="" />
        <div class="top">拼团的积分</div>
        <div class="bottom">去拼团</div>
      </li>
    </ul>
  </div>
</template>


<script>
export default {};
</script>


<style lang="less" scoped>
.eiltewrap {
  margin-top: 106px;
  .leftbox {
    display: flex;
    align-items: center;
    h1 {
      font-size: 30px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #242b39;
      margin-left: 10px;
    }
  }
  .box {
    margin-top: 23px;
    margin-bottom: 47px;
    display: flex;

    li {
      cursor: pointer;
      position: relative;
      margin-right: 20px;
      overflow: hidden;
      width: 285px;
      height: 168px;
      .top {
        position: absolute;
        left: 20px;
        top: 43px;
        font-size: 30px;
        font-family: SourceHanSansSC;
        font-weight: bold;
        color: #ffffff;
      }
      .bottom {
        position: absolute;
        left: 21px;
        top: 91px;
        width: 96px;
        height: 27px;
        border: 1px solid #fff;
        text-align: center;
        line-height: 27px;
        font-size: 16px;
        font-family: SourceHanSansSC;
        font-weight: 300;
        color: #ffffff;
      }
      img {
        transform: scale(1);
        transition: 0.5s;
      }
      &:hover img {
        transform: scale(1.08);
      }
    }
  }
}
</style>